<template>
    <div>
        <div class="bg-light lter b-b wrapper-md clearfix titleBtns">
            <h2 class="m-n font-thin h4 pull-left">服务器 > 图书管理 > 图书列表</h2>
           <!-- <div class="btns pull-right">
                <button class="btn m-b-xs w-xs btn-dark" @click="getRowData()">获取行数据</button>
            </div>-->
        </div>

        <div class="wrapper-md">
            <div class="panel panel-default form-horizontal form">
                <div class="table-search">
                    <div class="panel-heading" style="background-color: #f6f8f8 !important;">
                        查询条件
                    </div>
                    <div class="row wrapper">
                        <div class="col-md-10">

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-md-4 control-label">书籍类型:</label>
                                    <div class="col-md-8">
                                        <v-select url="../datas/bookType.json" :value.sync="select.normal" :placeholder="select.placeholder" :search-text="select.searchText" :value.sync="ajax.value" :search="select.search" :clear-button="select.clearButton"></v-select>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-md-4 control-label">书籍名称:</label>
                                    <div class="col-md-8">
                                        <input v-model='searchForm.queryParams.bookname' type="text" placeholder="书籍名称"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="col-md-4 control-label">作者姓名:</label>
                                    <div class="col-md-8">
                                        <input v-model='searchForm.queryParams.authorname' type="text" placeholder="作者姓名"
                                               class="form-control">
                                    </div>
                                </div>
                            </div>

                        </div>

                        <div class="col-md-2 text-center" style="margin-bottom:0px;">
                            <button type="button" @click="getQueryParams()" class="btn btn-dark">
                                <i class="fa fa-search"></i>查询
                            </button>
                        </div>
                    </div>
                </div>
                <div class="table-list">
                    <div class="panel-heading" style="background-color: #f6f8f8 !important;">数据列表</div>
                    <div class="panel-body">

                        <ui-operate-bar :elements="operateOptions"></ui-operate-bar>

                        <div class="table-responsive table-scrollable no-padding-bottom">

                            <demo-grid
                                    :row-events="itemActions"
                                    :columns="gridColumns" :data-url="url" :field-events="fieldEvents"
                                    :filter-key="searchQuery" :settings="settings" v-ref:table>
                            </demo-grid>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--modal-->
    <modal title="Fade Modal" :show.sync="modal.fadeModal" effect="fade" width="800">
            <div slot="modal-header" class="modal-header">
                <h4 class="modal-title">
                    <i class="fa fa-github-alt"></i><span>新增书籍</span>
                </h4>
            </div>
            <div slot="modal-body" class="modal-body">
                <validator name="validation">
                    <form novalidate name="dataForm" class="form-horizontal form">
                        <div class="form-body wrapper">
                            <div class="row dbRow">
                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">
                                            <span class="required">*</span>
                                            类型
                                        </label>
                                        <div class="col-md-9 uiFormItem">
                                            <div class="input-group">
                                                <v-select url="../datas/bookType.json" :disabled="disableFiled.typeDisable" :value.sync="book.bookType" :placeholder="select.placeholder" :search-text="select.searchText" :value.sync="ajax.value" :search="select.search" :clear-button="select.clearButton"></v-select>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">
                                            <span class="required">*</span>
                                            书名
                                        </label>
                                        <div class="col-md-9 uiFormItem">
                                            <input v-model='book.bookName' type="text" placeholder="请输入书籍名称"
                                                   class="form-control" v-bind:disabled="disableFiled.bookDisable" v-validate:book-name="['name']"/>
                                            <span v-if="$validation.bookName.touched" class="errors">
                                                <span v-if="$validation.bookName.name">书籍名称不能为空，且不能大于15位</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">
                                            <span class="required">*</span>
                                            作者
                                        </label>
                                        <div class="col-md-9 uiFormItem">
                                            <input v-model='book.authorName' type="text" placeholder="请输入作者姓名"
                                                   class="form-control" v-bind:disabled="disableFiled.authorDisable" v-validate:author-name="['name']"/>
                                            <span v-if="$validation.authorName.touched" class="errors">
                                                <span v-if="$validation.authorName.name">作者姓名不能为空，且不能大于15位</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">
                                            <span class="required">*</span>
                                            出版日期
                                        </label>
                                        <div class="col-md-9 uiFormItem">
                                            <vue-datetime-picker v-ref:picker class="vue-picker" name="picker"
                                                                 :model.sync="book.publishDate"
                                                                 type="date"
                                                                 language="zh-CN"
                                                                 date-format="L"
                                                                 :disable="disableFiled.publishDateDisable"
                                                                 :placeholder="date.placeholder">
                                            </vue-datetime-picker>
                                            <!--<vue-datetime-picker class="" name="picker2"
                                                                 :model.sync="book.publishDate"
                                                                 type="datetime"
                                                                 language="en"
                                                                 datetime-format="LLL">
                                            </vue-datetime-picker>-->
                                            <!--<datepicker v-ref:dp :value.sync="book.publishDate" :disabled-days-of-Week="date.disabled" :format="date.format.toString()" :clear-button="date.clear" :placeholder="date.placeholder"></datepicker>-->
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">
                                            <span class="required">*</span>
                                            价格
                                        </label>
                                        <div class="col-md-9 uiFormItem">
                                            <input v-model='book.price' type="text" placeholder="请录入价格"
                                                   class="form-control" v-bind:disabled="disableFiled.priceDisable" v-validate:price="{required: true, maxlength: 18, minlength: 1}"/>
                                            <span v-if="$validation.price.touched" class="errors">
                                                <span v-if="$validation.price.required || $validation.price.minlength">价格不能为空！且长度不能小于1位</span>
                                                <span v-if="$validation.price.maxlength">价格长度不能大于18位！</span>
                                            </span>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-12">
                                    <div class="form-group">
                                        <label class="col-md-2 control-label">
                                            <span class="required">*</span>
                                            描述
                                        </label>
                                        <div class="col-md-9 uiFormItem">
                                            <textarea class="form-control" v-model='book.desc' placeholder="请输入书籍描述" v-bind:disabled="disableFiled.descDisable"></textarea>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" @click="modal.fadeModal = false">取消</button>
                            <button type="submit" class="btn btn-dark" :disabled="!$validation.valid">确定</button>
                        </div>
                    </form>
                </validator>
            </div>
            <div slot="modal-footer" class="modal-footer">

            </div>
    </modal>


    <!--confirm弹窗-->
    <modal title="提示" small :show.sync="modal.confirmModal" effect="fade">
        <div slot="modal-body" class="modal-body">
            确定要对所选内容进行<span style="color: red;">删除</span>操作?
        </div>
        <div slot="modal-footer" class="modal-footer">
            <button type="button" class="btn btn-default" @click="modal.confirmModal = false">取消</button>
            <button type="button" class="btn btn-dark" @click="goQuit()">确定</button>
        </div>
    </modal>

    <!--Alert-->
    <alert :show.sync="alert.showTop" placement="top" duration="2000" type="info" width="400px" dismissable>
        <span class="icon-info-circled alert-icon-float-left"></span>
        <strong>Warning!</strong>
        <p>{{alert.txt}}</p>
    </alert>

</template>
<style lang="sass">
    .linka{
        color: goldenrod;
    }
    .linka:hover{
        text-decoration: underline;
    }

    .errors span{
        color: #f00;
        font-size: 12px;
    }

</style>
<script>

//    import vueDatetimePicker from 'vue-datetime-picker'

    import VueStrap from 'vue-strap'
    import dbFetch from '../../resources/services/dbFetch'
    import lang from 'lodash/lang'

    import demoGrid from '../../resources/components/demoGrid.vue'
    import uiOperateBar from '../../resources/components/uiOperateBar.vue'

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}

            let self = this;

            return {        //必须使用这样的形式，才能创建出单一的作用域
                searchQuery: '',
                gridColumns:[
                    {name:"书名",width:"15%",field:"bookName",class:"linka",clickEvent: function (row) {
                        //console.log(row.bookName,row.age);

                        self.book = row;

                        self.disableFiled = {
                            typeDisable:true,
                            bookDisable:true,
                            publishDateDisable:true,
                            authorDisable:true,
                            priceDisable:true,
                            descDisable:true
                        }

                        self.openModal();

                    }},
                    {name:"作者",width:"15%",field:"authorName"},
                    {name:"出版日期",width:"15%",field:"publishDate"},
                    {name:"定价",width:"15%",field:"price"},
                    {name:"描述",width:"15%",field:"desc"}
                ],
                fieldEvents: {
                    "priceFormat":function(value,row){
                        return value + 'abc';
                    },
                    "publishDateColor":function(value,row){
                        var color = "green";
                        return color;
                    }
                },
                url:"../datas/books.json",
                settings:{
                    autoLoad: true,
                    pageSize: 7,
                    showCheckBox: true
                },
                itemActions: {
                    show: true,
                    width: "10%",
                    events: [
                        {
                            name: '购买',
                            icon: 'pencil',
                            class: 'btn-default',
                            click:function(row){
                                alert('买了别后悔');
                            }
                        }
                    ]
                },
                searchForm:{
                    queryParams:{
                        username:null
                    }
                },
                select:{
                    options: [
                        {value: 1, label: 'Cat'},
                        {value: 2, label: 'Cow'},
                        {value: 3, label: 'Dog'},
                        {value: 4, label: 'Elephant'},
                        {value: 5, label: 'Fish'},
                        {value: 6, label: 'Lion'},
                        {value: 7, label: 'Tiger'},
                        {value: 8, label: 'Turtle'}
                    ],
                    justified: true,
                    search: true,
                    required:true,
                    clearButton:true,
                    closeOnSelect:false,
                    disabled:false,
                    normal:null,
                    placeholder:'请选择...',
                    searchText:'关键字'
                },
                ajax: {
                    value:null
                },
                operateOptions:[
                    {name: "刷新", type:"button", class:"btn-dark", icon:"refresh", events: {
                        clicker: function(data, element) {
                            alert("刷新");
                        }
                    }},
                    {name: "新建书籍", type:"button", class:"btn-dark", icon:"plus", events: {
                        clicker: function(data, element) {
                            //alert("新建项目");
                            self.openModal();
                        }
                    }},
                    {name: "编辑", type:"button", class:"btn-dark", icon:"pencil", events: {
                        clicker: function(data, element) {
                            self.editModal();
                        }
                    }},
                    {name: "删除", type:"button", class:"btn-dark", icon:"trash", events: {
                        clicker: function(data, element) {
                            self.quit();
                        }
                    }}
                ],
                modal:{
                    fadeModal:false,
                    confirmModal:false
                },
                book:{
                    bookType:null,
                    bookName:null,
                    publishDate:null,
                    authorName:null,
                    price:null,
                    desc:null
                },
                disableFiled:{
                    typeDisable:false,
                    bookDisable:false,
                    publishDateDisable:false,
                    authorDisable:false,
                    priceDisable:false,
                    descDisable:false
                },
                date: {
                    disabled: [],
                    format: ['yyyy-MM-dd'],
                    clear: false,
                    placeholder: '请选择出版日期'
                },
                alert:{
                    showTop: false,
                    txt:null
                },
                isEdit:false,
                ids:[]
            }
        },
        watch: {

        },
        ready () {
            this.asideExpand();
        },
        methods: {
            getRowData () {
                var rowData = this.$refs.table.getData()[0];
                console.log(rowData.name,rowData.power,rowData.age,rowData.email);
            },
            getQueryParams () {
                console.log(this.select.normal);
            },
            asideExpand () {
                this.$dispatch('asideExpand');   //侧边栏展开
            },
            openModal () {
                this.modal.fadeModal = true;

//                this.$dispatch('modalOpen');
            },
            editModal () {

                let rowArr = this.$refs.table.getData()
                if(rowArr.length == 0){
                    this.alert.showTop = true;
                    this.alert.txt = '请选择一条数据!!';
                }else if(rowArr.length > 1){
                    this.alert.showTop = true;
                    this.alert.txt = '请不要多选!!';
                }else{
                    this.book = lang.clone(rowArr[0]);
                    this.openModal();
                    this.isEdit = true;
                }

            },
            quit () {
                let rowArr = this.$refs.table.getData()
                if(rowArr.length == 0){
                    this.alert.showTop = true;
                    this.alert.txt = '请至少选择一条数据!!';
                }else{
                    this.modal.confirmModal = true;
                    let ids = dbFetch.getFieldArray(rowArr,'id');
                    this.ids = ids;
                }
            },
            goQuit () {
                console.log(this.ids);
                alert('执行删除操作');
                this.modal.confirmModal = false;
            },
            getFormData () {
                console.log(this.formatDate(this.book.publishDate));
                if(this.isEdit){
                    alert('正在执行编辑保存操作');
                    this.modal.fadeModal = false;
                }else{
                    alert('正在执行新增保存操作');
                    this.modal.fadeModal = false;
                }
            },
            formatDatetime: function(datetime) {
                if (datetime === null) {
                    return "[null]";
                } else {
                    return datetime.format("YYYY-MM-DD HH:mm:ss");
                }
            },
            formatDate: function(date) {
                if (date === null) {
                    return "[null]";
                } else {
                    return date.format("YYYY-MM-DD");
                }
            },
            formatTime: function(time) {
                if (time === null) {
                    return "[null]";
                } else {
                    return time.format("HH:mm:ss");
                }
            },
            onStartDatetimeChanged: function(newStart) {
                var endPicker = this.$.endPicker.control;
                endPicker.minDate(newStart);
            },
            onEndDatetimeChanged: function(newEnd) {
                var startPicker = this.$.startPicker.control;
                startPicker.maxDate(newEnd);
            }
        },
        events: {

        },
        validators: {  // 自定义的验证规则
            name: {
                check: function(val){  // val就是绑定的input/textarea的内容
                    if(val.length < 15){
                        return val.replace(/(^\s*)|(\s*$)/g,"")  // 判断是否输入空字符
                    }
                }
            },
            numeric: function (val/*,rule*/) {
                return /^[-+]?[0-9]+$/.test(val)
            },
            url: function (val) {
                return /^(http\:\/\/|https\:\/\/)(.{4,})$/.test(val)
            }
        },
        components: {
            demoGrid,
            uiOperateBar,
            "vue-datetime-picker": require("../../resources/vendor/lib/vue-datetime-picker.js"),
            vSelect:VueStrap.select,
            vOption:VueStrap.option,
            datepicker:VueStrap.datepicker,
            modal:VueStrap.modal,
            alert:VueStrap.alert
        }
    }

</script>
